@keyframes scrollanim {
    from {
        translate: -20pc 0;
        opacity: 0;
    }

    to {
        translate: 0 0;
        opacity: 1;
    }
}

@keyframes hideanim {
    
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes spin {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}


@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


body {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 254, 253);

}

header {
    background-color: rgb(19, 25, 48);
    padding: .1%;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;

}

header,footer {
    background-color: rgb(4, 13, 49);
    padding: .2%;
    width: 100%;
    top: 0;

    
}

header{
        z-index: 1;
            position: fixed;
                left: 0;
}

footer{
    width: 100%;
    margin-top: 3pc;
padding: 1pc;
    text-align: center;
    bottom: 0;
    
}

footer a{
    color: aliceblue;
    white-space: nowrap;
    margin: 1pc 0.75pc;

}



h1.mainhead{
    font-size: 5pc;
    margin-bottom: -1pc;
        text-shadow: black .5pc .5pc .25pc;
}



.mainhead {
    font-family: sans-serif;
    color: rgb(1, 157, 248);
        transition: 0.3s ease;
    transform-origin: top
}



h2.mainhead {
    letter-spacing: .5pc;
        text-shadow: black .5pc .5pc .25pc;

}


header h1, header h2 {
    margin-bottom: 10px;
    transition: all 0.4s ease-in-out;
}


header.shrunk h1 {
    font-size: 2.5rem;  /* shrink on scroll */
}

header.shrunk h2 {
    font-size: 1.2rem;
}

section {
    padding: 20px;
    transition: margin-top 0.4s ease-in-out;
}

section p{
    font-family: 'Rachana', serif;
    font-size: 1.5pc;
}

div.spacer{
    height: 17pc;
}

div.floater {
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    width: 50pc;
}

div.floating {
    padding: 1pc;
    padding-top: 0;
    width: 95%;
    min-width: 10pc;
    max-width: 18pc;
    height: 20%;
    min-height: 30%;
    margin: 2pc;

}

div.another {
    padding: 1pc;
    padding-top: 0.001pc;
    display: block;
    margin: 0 auto;
    margin-top: 2pc;
    margin-bottom: 2pc;
    min-width: 10pc;
    width: 90%;
    max-width: 50pc;
    height: 90%;
}

img.logo {
    height: 20pc;
    max-width: 97%;
    border-radius: 15%;
}


div.logo {
    position: relative;
    padding: 0;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-top: 3pc;
    margin-bottom: 3pc;
    width: max-content;
    background-color: rgb(0, 0, 0);
    border-radius: 15%;
}

div.logo::before,
div.logo::after {
    --angle: 0deg;
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
    z-index: -1;
    background-image: conic-gradient(from var(--angle), rgb(1, 157, 248), rgb(99, 139, 235), rgb(1, 157, 248));
    filter: blur(1pc);
    opacity: 0.5;
    border-radius: 15%;
    animation: spin 1.5s linear infinite;
}

div.glow {
    position: relative;
    background-color: rgb(46, 44, 44);
    border-radius: 2pc;
}

div.glow::after,
div.glow::before {
    --angle: 0deg;
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background-image: conic-gradient(from var(--angle), rgb(17, 0, 255), rgb(144, 171, 230), rgb(17, 0, 255));
    z-index: -1;
    padding: 5px;
    border-radius: 2pc;
    animation: spin 1.5s linear infinite;
}



div.glow::before {
    filter: blur(1pc);
    opacity: 0.5;
}


img {
    height: 8pc;
    display: block;
    margin: 0 auto;
    border-radius: 2pc;
    alt: "logo";
}



h1.apptitle {
    width: 100%;
    font-size: 2pc;
    margin-bottom: 1pc;

}

h1,
h2,
a,
button {
    text-align: center;
    font-weight: bolder;
    color: rgb(255, 254, 253);
}



h2.job {
    margin-top: -1.5pc;
}


.botpos {
    text-align: center;
    font-size: 1.5pc;
    width: 100%;
    bottom: 1pc;
    translate: -.5pc;
    position: absolute;
    display: block;
    margin: 0 auto;
}

.butlink {
    text-align: center;
    width: 100%;
    display: block;
    margin: 0 auto;
    margin-top: 1pc;

}




button {
    border-radius: 2pc;
    background-color: rgb(16, 38, 163);
    width: 75%;
    max-width: 30pc;
    font-size: 1.5pc;
    padding: 0.3pc;
    margin: 0 0.5pc;
}

.scrollanim {
    translate: -20pc 0;
    opacity: 0;
    animation: scrollanim linear;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
    animation-fill-mode: forwards;
}


button.dntbtn {
    background-color: rgb(70, 87, 143);
}


p {
    font-size: 1.25pc;
}

.textmarg {
    margin: 1pc;
    line-height: 2pc;
}

.topmarg {
    margin-top: 1pc;
}

.marg {
    margin: 2pc;
}


font {
    color: rgb(255, 255, 255);
}

h1.subhead {
    font-size: 2pc;
}

h2.sidehead {
    text-align: left;
    margin-left: 1pc;
    margin-top: 3pc;
}

nav {
    background-color: rgb(85, 85, 85);
    padding: 1pc;
}

summary {
    font-size: 1.5pc;
}

details p {
    text-align: left;
}

ul.applist {
    margin-bottom: 5pc;
}

li {
    font-size: 1.25pc;
    margin-bottom: 0.5pc;
}




@media screen and (max-width:768px) {

    h1.mainhead {
        font-size: 4pc;
    }

    .marg {
        margin: 1.5pc;
    }

}

@media screen and (max-width:480px) {

    h1.mainhead {
        font-size: 3pc;
    }

    .marg {
        margin: 1pc;
    }


}